<template>
  <div class="empty">
    <div class="noce">
      {{ noce }}
    </div>
    <div class="click" @click="savaState">
      <div @click="clickInner" class="inner">
        测试axios取消请求功能，cherry-pick
      </div>
      <div class="cherry">cherry</div>
      <div class="pick">pick</div>
    </div>
  </div>
</template>

<script>
/**
 *@author
 *@createTime  2020/11/3
 *@version  v1.0
 *@desc  空状态页面
 *@params
 */
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      noce: "noce",
      sex: "nan",
      name: "linxiaohui",
      show: false,
      courseRequestToken: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    savaState() {
      try {
        if (this.courseRequestToken) {
          this.courseRequestToken.cancel("'Operation canceled by the user.");
        }

        console.log("1");

        this.noce = "teo";
        this.show = !this.show;
        this.courseRequestToken = axios.CancelToken.source();

        axios
          .get(
            "https://www.fastmock.site/mock/b87730ac20af260a41d152999a07a969/api/test",
            {
              cancelToken: this.courseRequestToken.token,
            }
          )
          .catch(function(thrown) {
            if (axios.isCancel(thrown)) {
              console.log("Request canceled", thrown.message);
            } else {
              // 处理错误
            }
          });
      } catch (error) {
        console.log("error", error);
      }
    },
    clickInner() {
      if (true) {
      console.log("0");
        
      } else  {
      console.log("0");

      }
    },
    handleBaseInputClick(e) {
      console.log(e);
    },
  },
  errorCaptured(err, instance, info) {
    console.log("err, instance, info", err, instance, info);
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  deactivated() {
    console.log("被 keep-alive 缓存的组件停用时调用。");
  },
  activated() {
    console.log("被 keep-alive 缓存的组件停用时调用。");
  },
};
</script>
<style lang="scss" scoped>
.empty {
  .click {
    width: 500px;
    height: 500px;
    background: rebeccapurple;
    .inner {
      width: 200px;
      height: 200px;
      background: saddlebrown;
    }
  }
}
</style>
